<template>
  <div>
    <template v-if="showDefault">
      <nav
        :class="{
          nav_wrap: true,
          show_bg: $store.state.scrollTop > 10,
        }"
      >
        <nuxt-link to="/home">首页</nuxt-link>
        <nuxt-link to="/su7">S U 7</nuxt-link>
        <nuxt-link to="/hyperengine">超级电机</nuxt-link>
        <nuxt-link to="/hypercasting">超级大压铸</nuxt-link>
        <nuxt-link to="/pilot">智能驾驶</nuxt-link>
        <nuxt-link to="/smartcabin">智能座舱</nuxt-link>
        <el-dropdown
          v-if="$store.state.user.token"
          placement="top"
          @command="handleCommand"
        >
          <div class="me_wrap">
            <img src="@/assets/img/icon.png" />
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="gitee">
              <a class="link" href="https://gitee.com/zhouwj_dd" target="_blank"
                >my gitee</a
              >
            </el-dropdown-item>
            <el-dropdown-item command="out">
              <span class="link">sign out</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </nav>
    </template>
    <nuxt></nuxt>
    <template v-if="showDefault">
      <section>
        <div class="section_last">
          <p>那一天我二十一岁，在我一生的黄金时代，我有好多奢望</p>
          <p>我想爱，想吃，还想在一瞬间变成天上半明半暗的云</p>
          <p>后来我才知道，生活就是个缓慢受锤的过程</p>
          <p>人一天天老下去，奢望也一天天消失，最后变得像挨了锤的牛一样</p>
          <p>可是我过二十一岁生日时没有预见到这一点</p>
          <p>我觉得自己会永远生猛下去，什么也锤不了我</p>
        </div>
      </section>
      <footer>
        注：仿<a href="https://www.xiaomiev.com/" target="_blank"
          >小米汽车官网</a
        >仅作为学习nuxt使用，如侵必删！
      </footer>
    </template>
  </div>
</template>

<script>
export default {
  watch: {
    $route: {
      handler(route) {
        this.showDefault = !this.hideDefaultPath.includes(route.path);
      },
      immediate: true,
    },
  },
  data: () => ({
    hideDefaultPath: ["/login"],
    showDefault: false,
  }),
  methods: {
    handleCommand(command) {
      if (command == "out") {
        this.$cookies.removeAll();
        this.$store.commit("user/M_UPDATE_REMOVE");
        this.$router.replace({
          name: "login",
          query: {
            path: this.$route.fullPath,
          },
        });
      }
    },
  },
};
</script>

<style scoped>
.nav_wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 1rem;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  transition: all 0.4s;
  z-index: 999999;
}

.nav_wrap >>> .el-dropdown {
  position: absolute;
  right: 0.4rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  overflow: hidden;
  opacity: 0.5;
  display: block;
}

.me_wrap img {
  width: 0.42rem;
  height: 0.42rem;
  cursor: pointer;
  object-fit: fill;
}

.link {
  line-height: 36px;
  font-size: 0.46rem;
  margin: 0;
  color: #333;
}

.link:hover {
  color: #7a68e7;
}

.show_bg {
  background-color: rgba(0, 0, 0, 0.85);
}

a {
  font-weight: 600;
  font-size: 0.25rem;
  color: #fff;
  position: relative;
  height: 1rem;
  line-height: 1rem;
  margin: 0 0.53rem;
}

a.nuxt-link-exact-active {
  color: #f8cba0;
}

.section_last {
  padding: 1.5rem 1.87rem;
  background-color: #0f0f0f;
}

.section_last p {
  font-size: 0.22rem;
  color: #656565;
  line-height: 0.35rem;
}

footer {
  line-height: 1rem;
  text-align: center;
  color: #fff;
  font-size: 0.3rem;
  padding: 0.6rem 0;
}

footer a {
  color: #ff6901;
  font-size: 0.3rem;
  margin: 0;
}
</style>
